<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <link rel="stylesheet" href="./css/resersit.css">
    <link rel="stylesheet" href="./css/top.css">
    <link rel="stylesheet" href="./css/toplist.css">
    <link rel="stylesheet" href="./css/new.css">
    <link rel="stylesheet" href="./css/banner.css">
    <link rel="stylesheet" href="./css/mainbody_right.css">
    <link rel="stylesheet" href="./css/mainbody_left.css">
    <link rel="stylesheet" href="./css/footer.css"> -->
    <link rel="stylesheet" href="./css/getall.css">
</head>

<body>
    <header>
        <div class="container">
            <div class="box">
                <div class="top_left">
                    <h1 class="sprite">
                        <a href="">网易云音乐</a>
                    </h1>
                    <ul>
                        <li class="item active">
                            <a href="">发现音乐</a>
                        </li>
                        <li class="item">
                            <a href="">我的音乐</a>
                        </li>
                        <li class="item">
                            <a href="">关注</a>
                        </li>
                        <li class="item">
                            <a href="">商城</a>
                        </li>
                        <li class="item">
                            <a href="">音乐人</a>
                        </li>
                        <li class="item">
                            <a href="">云推歌</a>
                        </li>
                        <li class="item">
                            <a href="">下载客户端</a>
                        </li>
                    </ul>
                </div>
                <div class="top_right">
                    <div class="search">
                        <i class="icon_serach"></i>
                        <input type="text" placeholder="音乐/视频/电台/用户">
                    </div>
                    <div class="btn_user"><a href="">创作者中心</a></div>
                    <div class="login"><a href="">登录</a></div>
                </div>
            </div>
            <div class="mune">
                <div class="mune_1">
                    <ul>
                        <li><a href=""><em class="active_2">推荐</em> </a></li>
                        <li><a href=""><em>排行榜</em> </a></li>
                        <li><a href=""><em>歌单</em> </a></li>
                        <li><a href=""><em>主播电台</em> </a></li>
                        <li><a href=""><em>歌手</em> </a></li>
                        <li><a href=""><em>新碟上架</em> </a></li>
                    </ul>
                </div>
            </div>
        </div>
    </header>
    <main>
        <div class="banner">
            <div class="bannerall">
                <button class="btn btn1">  < </button>
                <button class="btn btn2">  > </button>

                <div class="banner_left">
                    <ul class="banner_1">
                        <li class="b_item">
                            <a href=""><img src="./img/banner.jpg" alt=""></a>
                        </li>
                        <li class="b_item">
                            <a href=""><img src="./img/banner2.jpg" alt=""></a>
                        </li>
                        <li class="b_item">
                            <a href=""><img src="./img/banner3.jpg" alt=""></a>
                        </li>
                        <li class="b_item">
                            <a href=""><img src="./img/banner4.jpg" alt=""></a>
                        </li>
                        <li class="b_item">
                            <a href=""><img src="./img/banner5.jpg" alt=""></a>
                        </li>
                        <li class="b_item">
                            <a href=""><img src="./img/banner6.jpg" alt=""></a>
                        </li>
                        <li class="b_item">
                            <a href=""><img src="./img/banner7.jpg" alt=""></a>
                        </li>
                        <li class="b_item">
                            <a href=""><img src="./img/banner8.jpg" alt=""></a>
                        </li>
                    </ul>
                </div>
                <div class="banner_right">
                    <a href=""></a>
                    <p>PC 安卓 iPhone WP iPad Mac 六大客户端</p>
                </div>
            </div>

        </div>
        <div class="mainbody">
            <div class="mainbody_1">
                <div class="mainbody_left">
                    <div class="left_first">
                        <div class="left_head">
                            <a href="">热门推荐</a>
                            <div class="tar">
                                <a href="">华语</a>
                                <span>|</span>
                                <a href="">流行</a>
                                <span>|</span>
                                <a href="">摇滚</a>
                                <span>|</span>
                                <a href="">民谣</a>
                                <span>|</span>
                                <a href="">电子</a>
                                <span>|</span>
                            </div>
                            <span class="more">
                            <a href="" >更多</a>
                            <i></i>
                                </span>
                        </div>
                    </div>
                    <div class="first">
                        <div class="left_item">
                            <div class="left_top">
                                <img src="./img/left_1.jpg" alt="图片">
                                <a href="" class="cover"></a>
                                <div class="left_info">
                                    <div class="cover_2">
                                    </div>
                                    <span class="span_1"> 40814</span>
                                    <div class="cover_3"></div>
                                </div>

                                <a href="" class="bottom">
                                    白日梦你丨夏日的尽头是一场清甜的梦</a>
                            </div>
                        </div>
                        <div class="left_item">
                            <div class="left_top">
                                <img src="./img/left_2.jpg" alt="图片">
                                <a href="" class="cover"></a>
                                <div class="left_info">
                                    <div class="cover_2">
                                    </div>
                                    <span class="span_1"> 40814</span>
                                    <div class="cover_3"></div>
                                </div>

                                <a href="" class="bottom">
                                    白日梦你丨夏日的尽头是一场清甜的梦</a>
                            </div>
                        </div>
                        <div class="left_item">
                            <div class="left_top">
                                <img src="./img/left_3.jpg" alt="图片">
                                <a href="" class="cover"></a>
                                <div class="left_info">
                                    <div class="cover_2">
                                    </div>
                                    <span class="span_1"> 40814</span>
                                    <div class="cover_3"></div>
                                </div>

                                <a href="" class="bottom">
                                    白日梦你丨夏日的尽头是一场清甜的梦</a>
                            </div>
                        </div>
                        <div class="left_item">
                            <div class="left_top">
                                <img src="./img/left_4.jpg" alt="图片">
                                <a href="" class="cover"></a>
                                <div class="left_info">
                                    <div class="cover_2">
                                    </div>
                                    <span class="span_1"> 40814</span>
                                    <div class="cover_3"></div>
                                </div>

                                <a href="" class="bottom">
                                    白日梦你丨夏日的尽头是一场清甜的梦</a>
                            </div>
                        </div>
                        <div class="left_item">
                            <div class="left_top">
                                <img src="./img/left_1.jpg" alt="图片">
                                <a href="" class="cover"></a>
                                <div class="left_info">
                                    <div class="cover_2">
                                    </div>
                                    <span class="span_1"> 40814</span>
                                    <div class="cover_3"></div>
                                </div>

                                <a href="" class="bottom">
                                    白日梦你丨夏日的尽头是一场清甜的梦</a>
                            </div>
                        </div>
                        <div class="left_item">
                            <div class="left_top">
                                <img src="./img/left_1.jpg" alt="图片">
                                <a href="" class="cover"></a>
                                <div class="left_info">
                                    <div class="cover_2">
                                    </div>
                                    <span class="span_1"> 40814</span>
                                    <div class="cover_3"></div>
                                </div>

                                <a href="" class="bottom">
                                    白日梦你丨夏日的尽头是一场清甜的梦</a>
                            </div>
                        </div>
                        <div class="left_item">
                            <div class="left_top">
                                <img src="./img/left_1.jpg" alt="图片">
                                <a href="" class="cover"></a>
                                <div class="left_info">
                                    <div class="cover_2">
                                    </div>
                                    <span class="span_1"> 40814</span>
                                    <div class="cover_3"></div>
                                </div>

                                <a href="" class="bottom">
                                    白日梦你丨夏日的尽头是一场清甜的梦</a>
                            </div>
                        </div>
                        <div class="left_item">
                            <div class="left_top">
                                <img src="./img/left_1.jpg" alt="图片">
                                <a href="" class="cover"></a>
                                <div class="left_info">
                                    <div class="cover_2">
                                    </div>
                                    <span class="span_1"> 40814</span>
                                    <div class="cover_3"></div>
                                </div>

                                <a href="" class="bottom">
                                    白日梦你丨夏日的尽头是一场清甜的梦</a>
                            </div>
                        </div>

                    </div>
                    <div class="news left_first">
                        <div class="left_head ">
                            <a href="" class="new">新碟上架</a>
                        </div>
                        <span class="more more_new">
                            <a href="" >更多</a>
                            <i></i>
                                </span>
                    </div>
                    <div class="news_body">
                        <div class="news_inner">
                            <div class="news_item">
                                <ul class="news_items">
                                    <li>
                                        <div class="">
                                            <img class="" src="./img/news_item.jpg" alt="">
                                            <a href="" class="backgrond backgrond_1"></a>
                                            <a href="" class="play"></a>
                                        </div>
                                        <p class="new_p"><a href="">Elemental (Original Motion Picture Soundtrack)</a></p>
                                        <p class="new_p">
                                            <a href="">Thomas Newman</a>
                                        </p>
                                    </li>
                                    <li>
                                        <div class="">
                                            <img class="" src="./img/news_item.jpg" alt="">
                                            <a href="" class="backgrond backgrond_2"></a>
                                            <a href="" class="play"></a>
                                        </div>
                                        <p class="new_p"><a href="">Elemental (Original Motion Picture Soundtrack)</a></p>
                                        <p class="new_p">
                                            <a href="">Thomas Newman</a>
                                        </p>
                                    </li>
                                    <li>
                                        <div class="">
                                            <img class="" src="./img/news_item.jpg" alt="">
                                            <a href="" class="backgrond backgrond_3"></a>
                                            <a href="" class="play"></a>
                                        </div>
                                        <p class="new_p"><a href="">Elemental (Original Motion Picture Soundtrack)</a></p>
                                        <p class="new_p">
                                            <a href="">Thomas Newman</a>
                                        </p>
                                    </li>
                                    <li>
                                        <div class="">
                                            <img class="" src="./img/news_item.jpg" alt="">
                                            <a href="" class="backgrond backgrond_4"></a>
                                            <a href="" class="play"></a>
                                        </div>
                                        <p class="new_p"><a href="">Elemental (Original Motion Picture Soundtrack)</a></p>
                                        <p class="new_p">
                                            <a href="">Thomas Newman</a>
                                        </p>
                                    </li>
                                    <li>
                                        <div class="">
                                            <img class="" src="./img/news_item.jpg" alt="">
                                            <a href="" class="backgrond backgrond_5"></a>
                                            <a href="" class="play"></a>
                                        </div>
                                        <p class="new_p"><a href="">Elemental (Original Motion Picture Soundtrack)</a></p>
                                        <p class="new_p">
                                            <a href="">Thomas Newman</a>
                                        </p>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="news left_first " id="toplist">
                        <div class="left_head ">
                            <a href="" class="new">榜单</a>
                        </div>
                        <span class="more more_new">
                            <a href="" >更多</a>
                            <i></i>
                                </span>
                    </div>
                    <div class="top_list">
                        <dl>
                            <dt class="toplist_head">
                                <div class="top_img">
                                    <img src="./img/top_head.jpg" alt="">
                                    <a href=""></a>
                                </div>
                                <div class="title">
                                    <a href=""><h3>飙升榜</h3></a>
                                    <div class="btn_play">
                                        <a href="" class="btn_player">播放</a>
                                        <a href="" class="btn_coll">收藏</a>
                                    </div>
                                </div>
                            </dt>
                            <dd class="top_item">
                                <ol>
                                    <li><span class="hot">1</span>
                                        <a href="">Reverse</a>
                                    </li>
                                    <li><span class="hot">1</span>
                                        <a href="">Reverse</a>
                                    </li>
                                    <li><span class="hot">1</span>
                                        <a href="">Reverse</a>
                                    </li>
                                    <li><span class="hot">1</span>
                                        <a href="">Reverse</a>
                                    </li>
                                    <li><span class="hot">1</span>
                                        <a href="">Reverse</a>
                                    </li>
                                    <li><span class="hot">1</span>
                                        <a href="">Reverse</a>
                                    </li>
                                    <li><span class="hot">1</span>
                                        <a href="">Reverse</a>
                                    </li>
                                    <li><span class="hot">1</span>
                                        <a href="">Reverse</a>
                                    </li>
                                    <li><span class="hot">1</span>
                                        <a href="">Reverse</a>
                                    </li>
                                    <li><span class="hot">1</span>
                                        <a href="">Reverse</a>
                                    </li>
                                </ol>
                                <div class="more"><a href="">查看全部> </a></div>
                            </dd>
                        </dl>
                        <dl>
                            <dt class="toplist_head">
                                <div class="top_img">
                                    <img src="./img/top_head.jpg" alt="">
                                    <a href=""></a>
                                </div>
                                <div class="title">
                                    <a href=""><h3>飙升榜</h3></a>
                                    <div class="btn_play">
                                        <a href="" class="btn_player">播放</a>
                                        <a href="" class="btn_coll">收藏</a>
                                    </div>
                                </div>
                            </dt>
                            <dd class="top_item">
                                <ol>
                                    <li><span class="hot">1</span>
                                        <a href="">Reverse</a>
                                    </li>
                                    <li><span class="hot">1</span>
                                        <a href="">Reverse</a>
                                    </li>
                                    <li><span class="hot">1</span>
                                        <a href="">Reverse</a>
                                    </li>
                                    <li><span class="hot">1</span>
                                        <a href="">Reverse</a>
                                    </li>
                                    <li><span class="hot">1</span>
                                        <a href="">Reverse</a>
                                    </li>
                                    <li><span class="hot">1</span>
                                        <a href="">Reverse</a>
                                    </li>
                                    <li><span class="hot">1</span>
                                        <a href="">Reverse</a>
                                    </li>
                                    <li><span class="hot">1</span>
                                        <a href="">Reverse</a>
                                    </li>
                                    <li><span class="hot">1</span>
                                        <a href="">Reverse</a>
                                    </li>
                                    <li><span class="hot">1</span>
                                        <a href="">Reverse</a>
                                    </li>
                                </ol>
                                <div class="more"><a href="">查看全部> </a></div>
                            </dd>
                        </dl>
                        <dl>
                            <dt class="toplist_head">
                                <div class="top_img">
                                    <img src="./img/top_head.jpg" alt="">
                                    <a href=""></a>
                                </div>
                                <div class="title">
                                    <a href=""><h3>飙升榜</h3></a>
                                    <div class="btn_play">
                                        <a href="" class="btn_player">播放</a>
                                        <a href="" class="btn_coll">收藏</a>
                                    </div>
                                </div>
                            </dt>
                            <dd class="top_item">
                                <ol>
                                    <li><span class="hot">1</span>
                                        <a href="">Reverse</a>
                                    </li>
                                    <li><span class="hot">1</span>
                                        <a href="">Reverse</a>
                                    </li>
                                    <li><span class="hot">1</span>
                                        <a href="">Reverse</a>
                                    </li>
                                    <li><span class="hot">1</span>
                                        <a href="">Reverse</a>
                                    </li>
                                    <li><span class="hot">1</span>
                                        <a href="">Reverse</a>
                                    </li>
                                    <li><span class="hot">1</span>
                                        <a href="">Reverse</a>
                                    </li>
                                    <li><span class="hot">1</span>
                                        <a href="">Reverse</a>
                                    </li>
                                    <li><span class="hot">1</span>
                                        <a href="">Reverse</a>
                                    </li>
                                    <li><span class="hot">1</span>
                                        <a href="">Reverse</a>
                                    </li>
                                    <li><span class="hot">1</span>
                                        <a href="">Reverse</a>
                                    </li>
                                </ol>
                                <div class="more"><a href="">查看全部> </a></div>
                            </dd>
                        </dl>
                    </div>
                </div>


                <div class="mainbody_right">
                    <p>登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机</p>
                    <a href="" class="user_login">用户登录</a>
                    <div class="singerbox">
                        <h3 class="h3"><span class="span">
                            入驻歌手
                        </span>
                            <a href="">查看全部 > </a></h3>

                        <div class="singer">
                            <ul>
                                <li class="singer_item">
                                    <a href="">
                                        <div class="head">
                                            <img src="./img/singer_item.jpg" alt="">
                                        </div>
                                        <div class="info">
                                            <h4>
                                                <span>张惠妹aMEI</span>
                                            </h4>
                                            <p>台湾歌手张惠妹</p>
                                        </div>
                                    </a>
                                </li>
                                <li class="singer_item">
                                    <a href="">
                                        <div class="head">
                                            <img src="./img/singer_item.jpg" alt="">
                                        </div>
                                        <div class="info">
                                            <h4>
                                                <span>张惠妹aMEI</span>
                                            </h4>
                                            <p>台湾歌手张惠妹</p>
                                        </div>
                                    </a>
                                </li>
                                <li class="singer_item">
                                    <a href="">
                                        <div class="head">
                                            <img src="./img/singer_item.jpg" alt="">
                                        </div>
                                        <div class="info">
                                            <h4>
                                                <span>张惠妹aMEI</span>
                                            </h4>
                                            <p>台湾歌手张惠妹</p>
                                        </div>
                                    </a>
                                </li>
                                <li class="singer_item">
                                    <a href="">
                                        <div class="head">
                                            <img src="./img/singer_item.jpg" alt="">
                                        </div>
                                        <div class="info">
                                            <h4>
                                                <span>张惠妹aMEI</span>
                                            </h4>
                                            <p>台湾歌手张惠妹</p>
                                        </div>
                                    </a>
                                </li>
                                <li class="singer_item">
                                    <a href="">
                                        <div class="head">
                                            <img src="./img/singer_item.jpg" alt="">
                                        </div>
                                        <div class="info">
                                            <h4>
                                                <span>张惠妹aMEI</span>
                                            </h4>
                                            <p>台湾歌手张惠妹</p>
                                        </div>
                                    </a>
                                </li>
                            </ul>
                        </div>
                        <div class="btn_1">
                            <a href="" class="btn_2"><i>
                               <span> 申请成为网易音乐人</span>
                            </i></a>
                        </div>
                    </div>
                    <div class="hotsingerbox">
                        <h3 class="h3"><span class="span">
                            热门主播
                        </span>
                        </h3>
                        <div class="hotsinger">
                            <ul>
                                <li class="hot_item">
                                    <a href="">
                                        <div class="head"><img src="./img/hotitem_1.jpg" alt=""></div>
                                        <div class="info">
                                            <h3>
                                                <span class="name">陈粒</span>
                                                <p>心理学家、美食家陈立教授</p>
                                            </h3>
                                        </div>
                                    </a>
                                </li>
                                <li class="hot_item">
                                    <a href="">
                                        <div class="head"><img src="./img/hotitem_1.jpg" alt=""></div>
                                        <div class="info">
                                            <h3>
                                                <span class="name">陈粒</span>
                                                <p>心理学家、美食家陈立教授</p>
                                            </h3>
                                        </div>
                                    </a>
                                </li>
                                <li class="hot_item">
                                    <a href="">
                                        <div class="head"><img src="./img/hotitem_1.jpg" alt=""></div>
                                        <div class="info">
                                            <h3>
                                                <span class="name">陈粒</span>
                                                <p>心理学家、美食家陈立教授</p>
                                            </h3>
                                        </div>
                                    </a>
                                </li>
                                <li class="hot_item">
                                    <a href="">
                                        <div class="head"><img src="./img/hotitem_1.jpg" alt=""></div>
                                        <div class="info">
                                            <h3>
                                                <span class="name">陈粒</span>
                                                <p>心理学家、美食家陈立教授</p>
                                            </h3>
                                        </div>
                                    </a>
                                </li>
                                <li class="hot_item">
                                    <a href="">
                                        <div class="head"><img src="./img/hotitem_1.jpg" alt=""></div>
                                        <div class="info">
                                            <h3>
                                                <span class="name">陈粒</span>
                                                <p>心理学家、美食家陈立教授</p>
                                            </h3>
                                        </div>
                                    </a>
                                </li>

                            </ul>
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </main>
    <footer>
        <div class="footer">
            <div class="ft_box">
                <ul>
                    <li class="unit">
                        <a href="" class="unit_1 "></a>
                        <span>音乐开放平台</span>
                    </li>
                    <li class="unit">
                        <a href="" class="unit_2"></a>
                        <span>云村交易所</span>
                    </li>
                    <li class="unit">
                        <a href="" class="unit_3 "></a>
                        <span>Amped Studio</span>
                    </li>
                    <li class="unit">
                        <a href="" class="unit_4 "></a>
                        <span>X Studio虚拟歌手</span>
                    </li>
                    <li class="unit">
                        <a href="" class="unit_5 "></a>
                        <span>
                            用户认证
                                
                            </span>
                    </li>
                    <li class="unit">
                        <a href="" class="unit_6 "></a>
                        <span>
                            音乐交易平台
                            
                            </span>
                    </li>
                    <li class="unit">
                        <a href="" class="unit_7 "></a>
                        <span>
                            云推歌
                            </span>
                    </li>
                    <li class="unit">
                        <a href="" class="unit_8 "></a>
                        <span>赞赏</span>
                    </li>
                </ul>
                <div class="copy">
                    <p class="p_1">
                        <a href="">服务条款</a><span>|</span>
                        <a href="">隐私政策</a><span>|</span>
                        <a href="">儿童隐私政策</a><span>|</span>
                        <a href="">版权投诉</a><span>|</span>
                        <a href="">投资者关系</a><span>|</span>
                        <a href="">广告合作</a><span>|</span>
                        <a href="">联系我们</a><span>|</span>
                    </p>
                    <p class="p_2">
                        <a href="">廉正举报</a>
                        <span>不良信息举报邮箱: 51jubao@service.netease.com</span>
                        <span>客服热线：95163298</span>
                    </p>
                    <p class="p_3">
                        <span>互联网宗教信息服务许可证：浙（2022）0000120</span><span>增值电信业务经营许可证：浙B2-20150198</span>
                        <a href="">粤B2-20090191-18  工业和信息化部备案管理系统网站</a>
                    </p>
                    <p class="p_4">
                        <span>爱吃罗非鱼版权所有©1997-2023</span>
                    </p>
                </div>
            </div>
        </div>
    </footer>
    <script>
        var btn1EL = document.querySelector(".btn1")
        var btn2EL = document.querySelector(".btn2")
        var liEL = document.querySelector(".banner_1")
        var i = liEL.children.length
        console.log(i)
        var index = 0

        function btn_r() {
            index++
            if (index == i) {
                index = 0
            }
            liEL.style.transform = `translateX(${-736*index}px)`
            liEL.style.transition = `all 0.8s ease`
            if (index == i - 1) {
                index = -1
            }
        }

        function btn_l() {
            index--
            if (index == -1) {
                index = i - 1
            }
            if (index == -2) {
                index = i - 2
            }
            liEL.style.transform = `translateX(${-736*index}px)`
            liEL.style.transition = `all 0.8s ease`
        }
        btn2EL.addEventListener('click', function() {
            btn_r()
        })
        btn1EL.addEventListener('click', function() {
            btn_l()
        })
    </script>
</body>


</html>